<template>
	<view class="padding-top-bj">
		<view class="edgeInsetTop"></view>
		<wanl-empty v-if="addressList.length === 0 && status !== 'loading'" text="还没添加任何数据"/>
		<view class="">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName == 'move-box-' + index ? 'move-cur' : ''" v-if="addressList" v-for="(item, index) in addressList" :key="item.id" @tap="checkAddress(item,index)" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index" >
					<view class="cu-avatar round lg" style="background-color: #C2F3CD;">{{ item.name.substring(0, 1) }}</view>
					<view class="content">
						<view>
							<text class="wanl-pip margin-right-sm text-lg">{{ item.name }} {{item.mobile}}</text>
							<text class="wanl-gray-light text-sm relation">{{ item.relation_txt }}</text>
						</view>
						<view class="text-sm wanl-pip text-cut-2 margin-top-xs" style="line-height: 1.3;">
							<text class="wlIcon-dizhi text-red margin-right-xs"></text>
							{{ item.address_detail }}
						</view>
					</view>
					<view v-if="source == 4 || source == 5" class="action" @tap.stop="checkAddress(item)">
						<text style="font-size: 40rpx;" v-if="item.id == value" class="wlIcon-31xuanzhong text-green"></text>
						<text style="font-size: 40rpx;" v-else class="wlIcon-31yiguanzhudianpu text-gray"></text>
					</view>
					<view v-else class="action" @tap.stop="addAddress('edit', item)">
						<text class="wlIcon-xiugaioryijian text-xl text-green"></text>
					</view>
					<view class="move">
						<view class="bg-grey" @tap.stop="addAddress('edit', item)">编辑</view>
						<view class="bg-red" @tap.stop="delAddress(item.id, index)">删除</view>
					</view>
				</view>
				<wanl-empty text="没有找到数据" v-else/>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="safeAreaBottom"> </view>
		
		<view class="wanlian cu-bar tabbar foot flex flex-direction" v-if="source == 4 && addressList.length > 0"><button @tap="next('add')" class="cu-btn bg-green lg">下一步</button></view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction" v-if="source == 5 && addressList.length > 0"><button @tap="next('confirm')" class="cu-btn bg-green lg">确定</button></view>

		<view class="wanlian cu-bar tabbar foot flex flex-direction" v-if="(source != 4 && source != 5) || addressList.length == 0"><button @tap="addAddress('add')" class="cu-btn bg-green lg">+ 添加我的家人</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			source: 0,
			order_id: 0,
			addressList: [],
			modalName: null,
			listTouchStart: 0,
			listTouchDirection: null,
			//上拉下拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1 ,//总页码
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载..',
				contentnomore: ''
			},
			doctorId: '',
			daytime: '',
			value:'',
			time_type: null
		};
	},
	// 监听下拉刷新
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	// 监听上拉加载
	onReachBottom() {
		//判断是否最后一页
		if(this.current_page >= this.last_page){
			this.status = 'noMore';
		}else{
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData(true);
		}
	},
	onLoad(option) {
		this.source = option.source;
		this.loadData();
		if(option.time_type) {
			this.time_type = option.time_type
		}
		if(option.source && (option.source == 4 || option.source == 5)) {
			this.doctorId = option.order_id
			this.daytime = option.daytime
			uni.setNavigationBarTitle({
				title:'请选择'
			})
		}
		if(option.source && (option.source == 3 || option.source == 2)) {
			this.order_id = option.order_id
		}
	},
	methods: {
		async loadData(reload, refresh) {
			await uni.request({
				url: `/member/family/lists`,
				method:"POST",
				data:{
					page: reload?(this.current_page):1
				},
				success: res => {
					if(reload){
						this.addressList = this.addressList.concat(res.data.data);
					}else{
						this.addressList = res.data.data;
						uni.stopPullDownRefresh();
					}
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore':'more';
				}
			});
		},
		// 删除
		async delAddress(id, key) {
			await uni.request({
				url: `/member/family/del`,
				method: 'POST',
				data: { id: id },
				success: res => {
					this.addressList.splice(key, 1);
					this.$wanlshop.msg('删除成功')
				}
			});
		},
		//添加或修改成功之后回调
		async refreshList(data, type) {
			console.log(data,type)
			await uni.request({
				url: `/member/address/${type}`,
				method: 'POST',
				data: data,
				success: (res) => {
					this.loadData(false,true);
				}
			});
		},
		next(type) {
			if(type == 'confirm') {
				if(!this.value) return this.$wanlshop.msg('请选择家人')
				this.$wanlshop.prePage().setUsers(this.value);
				this.$wanlshop.back(1)
			} else {
				if(!this.value) return this.$wanlshop.msg('请选择就诊人')
				this.$wanlshop.to(`/pages/medicalcare/bookingsystem/orderInfo?id=${this.doctorId}&visitor_id=${this.value}&daytime=${this.daytime}&time_type=${this.time_type}`);
			}
		},
		//选择地址
		checkAddress(item) {
			if(this.source) {
				if(this.source == 4 || this.source == 5) {
					this.value = item.id
				} else {
					uni.request({
						url: '/member/address/check',
						method: 'POST',
						data: {
							type:this.source,
							product_id:this.order_id,
							family_id:item.id
						},
						success: (res) => {
							this.$wanlshop.prePage().getUsers(item);
							this.$wanlshop.back(1)
						}
					});
				}
			} else {
				this.$wanlshop.to(`/pages/user/record/treatment/add?id=${item.id}`)
			}
		},
		// 新增地址
		addAddress(type, item) {
			if(type == 'add') {
				this.$wanlshop.to('/pages/user/record/treatment/add')
			} else {
				this.$wanlshop.to(`/pages/user/record/treatment/add?id=${item.id}`)
			}
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX;
		},
		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
		},
		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target;
			} else {
				this.modalName = null;
			}
			this.listTouchDirection = null;
		}
	}
};
</script>

<style>
.cu-avatar.lg {
	width: 90rpx;
	height: 90rpx;
	font-size: 1.5em;
	color: #4CBD66;
}
.cu-list.menu-avatar>.cu-item{
	height: 160rpx;
}
.wanlian.cu-bar.tabbar {
	background-color: transparent;
}
.wanlian.cu-bar.tabbar .cu-btn {
	width: calc(100% - 50rpx);
	border-radius: 50rpx;
}
.wanlian.cu-bar.tabbar .cu-btn.lg {
	font-size: 32rpx;
	/* height: 86rpx; */
}

.relation {
	width: 98rpx;
	height: 40rpx;
	background: #E9F4EB;
	border-radius: 20rpx;
	
	font-size: 26rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #4CBD66;
	line-height: 40rpx;
	text-align: center;
}
</style>
